import { useState } from 'react'
import './index.scss'
// import { Button } from 'antd';
import { Modal, Table, Space, Tag, Pagination, Input, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
const { TextArea, Search } = Input;
//类型查找
function funcOFType(types: string) {
  let listType = [{
    type: 'all',
    color: 'geekblue',
    name: '全部类'
  }, {
    type: 'talk',
    color: 'green',
    name: '其他'
  }, {
    type: 'profess',
    color: 'loser',
    name: '兼容'
  }, {
    type: 'appreciate',
    color: 'volcano',
    name: 'BUG'
  }, {
    type: 'idle',
    color: 'green',
    name: '建议'
  }, {
    type: 'seek',
    color: 'volcano',
    name: '反馈'
  }]

  for (const i in listType) {
    if (types == listType[i].type) {
      return listType[i];
    }
  }
}

interface DataType {
  id: number;
  blok: string;
  type: string;
  date: string;
  place: string;
  user_id: number;
  content: string;
  comment: string;
}

function DivFunc() {
  //栏目
  const columns: ColumnsType<DataType> = [
    {
      title: '标签',
      dataIndex: 'type',
      key: 'type',
      width: 80,
      render: (types) => (
        <Tag color={funcOFType(types)?.color} key={types}>
          {funcOFType(types)?.name}
        </Tag>
      ),
    }, {
      title: '时间',
      dataIndex: 'date',
      key: 'date',
      width: 220,
    }, {
      title: 'IP属地',
      dataIndex: 'place',
      key: 'place',
      width: 140,
    }, {
      title: '用户ID',
      key: 'user_id',
      dataIndex: 'user_id',
      width: 100,
    }, {
      title: '学校ID',
      key: 'school',
      dataIndex: 'school',
      width: 100,
    }, {
      title: '内容',
      key: 'content', 
      width: 250,
      dataIndex: 'content',
    }, {
      title: '回复',
      key: 'reply', 
      width: 220,
      dataIndex: 'reply',
    }, {
      title: '回复时间',
      key: 'reply_date',
      dataIndex: 'reply_date',
      width: 220,
    }, {
      title: '操作',
      key: 'action',
      width: 100,
      fixed: 'right',
      render: (_, __, index: any) => (
        <Button size="small" type="primary" onClick={() => tapReply(index, 'show')}>回复</Button>
      ),
    },
  ];
  const [data, setState] = useState<{ listData: DataType[], showModal: boolean }>({
    //数据列表
    listData: [
      {
        id: 1,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 2,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 3,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 4,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 5,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 6,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 7,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 8,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 9,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 113,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      }, {
        id: 10,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容',
        comment: '评论 评论',
      },
    ],
    //
    showModal: false,
  })
  //回复
  const tapReply = (res: any, blok: string) => {
    console.log(res, blok)
    setState(State => ({ ...State, showModal: data.showModal ? false : true }))
  }
  //分页
  const tapPagination = (res: any) => {
    console.log(res)
  }
  //搜索
  const tapSearch = (res: any) => {
    console.log(res)
  }

  return (
    <div className='feedback_body'>
      {/* 选项区 */}
      <Space direction="vertical" className='search'>
        <Search placeholder="请输入搜索内容..." onSearch={tapSearch} />
      </Space>
      {/* 表单 */}
      <Table columns={columns}
        dataSource={data.listData}
        pagination={false}
        rowKey="id"
        scroll={{ y: '71.5vh' }}
      />
      {/* 分页 */}
      <div className='pagination'>
        <Pagination
          size="small"
          showTitle={false}
          total={data.listData.length}
          // showTotal={(total) => `共 ${total} 条`}
          defaultPageSize={15}
          defaultCurrent={1}
          onChange={tapPagination}
        />
      </div>

      {/* 弹出层 */}
      <Modal
        open={data.showModal}
        maskClosable={false}
        closable={false}
        okText="回复"
        cancelText="关闭"
        onCancel={() => tapReply(null, 'no')}
        onOk={() => tapReply(null, 'ok')}
      >
        <div >
          <TextArea placeholder="请输入回复内容..." autoSize={{ minRows: 2, maxRows: 6 }} />
        </div>
      </Modal >
    </div >
  )
}

export default DivFunc
